<template>
    <div id="container" style="width: 100%; height: 100vh;">
      <button class="refresh-button" @click="refresh">刷新</button>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  import { listCover, getCover, delCover, addCover, updateCover } from "@/api/managent/cover";

    const apiKey = ref('#{你自己的API_KEY}');
    const coverList = ref([]);
    let map;

    onMounted(() => {
    const script = document.createElement('script');
    script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${apiKey.value}`;
    script.onload = () => {
      getCoverList();
      initMap();
    };
    document.head.appendChild(script);
  });


  function initMap() {
    map = new AMap.Map('container', {
      resizeEnable: true, 
      zoom: 11,
      center: [120.591389, 31.314338] 
    });

    coverList.value.forEach(item => {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(item.longitude, item.latitude),
        title: item.remark || '无备注'
      });

      map.add(marker);
    });

  }

  function refresh(){
    getCoverList();

    coverList.value.forEach(item => {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(item.longitude, item.latitude),
        title: item.remark || '无备注'
      });

      map.add(marker);
    });
  }

  function getCoverList(){
    listCover().then(response => {
    coverList.value = response.rows;
  });
}

  
  
  </script>
  
  <style scoped>
.refresh-button {
  position: absolute; 
  top: 10px; 
  right: 10px;
  padding: 10px 20px;
  font-size: 16px; 
  color: #fff; 
  background-color: #007bff; 
  border: none; 
  border-radius: 5px; 
  cursor: pointer; 
  outline: none; 
  z-index: 9999; 
}

.refresh-button:hover {
  background-color: #0056b3;
}
</style>
  